{extend name="./template/default/pub/pc_base.html" /}
{block name="seo"}
<title>{$cate_selector}漫画-{$site_name}</title>
{/block}
{block name="content"}
<section class="container-fluid bg-gray">
    <div class="container">
        <figure class="cat-filter">
            <dl class="cat-list" id="tags">
                <dt>题 材:</dt>
                <dd class="{$cate_selector=='全部'?'active':''}" onclick="active(this)" data-val="全部"><a>全部</a></dd>
                {volist name="tags" id="vo"}
                <dd class="{$cate_selector==$vo.tag_name?'active':''}" onclick="active(this)" data-val="{$vo.tag_name}"><a>{$vo.tag_name}</a></dd>
                {/volist}
            </dl>
            <div class="field-wrap">
                <dl class="field-list" id="areas">
                    <dt>地 区:</dt>
                    <dd class="{$area_selector=='全部'?'active':''}" onclick="active(this)" data-val="-1"><a>全部</a></dd>
                    {volist name="areas" id="vo"}
                    <dd class="{$area_selector==$vo.id?'active':''}" onclick="active(this)" data-val="{$vo.id}"><a>{$vo.area_name}</a></dd>
                    {/volist}
                </dl>
                <dl class="field-list" id="end">
                    <dt>进 度:</dt>
                    <dd class="{$end_selector=='全部'?'active':''}" onclick="active(this)" data-val="-1"><a>全部</a></dd>
                    <dd class="{$end_selector=='0'?'active':''}" onclick="active(this)" data-val="0"><a>连载</a></dd>
                    <dd class="{$end_selector=='1'?'active':''}" onclick="active(this)" data-val="1"><a>完结</a></dd>
                </dl>
            </div>
        </figure>
    </div>
</section>
<script>
    function active(item) {
        $(item).siblings().removeClass('active');
        $(item).addClass('active');
        var tag = $('#tags dd.active').attr('data-val');
        var area = $('#areas dd.active').attr('data-val');
        var end = $('#end dd.active').attr('data-val');
        location.href = '/{$booklist_act}?tag='+tag+'&area='+area+'&end='+end;
    }
</script>
<section class="box container pb40 overflow-Show" style="min-height:400px;">
    <div class="box-body">
        <ul class="mh-list col7">
            {volist name="books" id="vo"}
            <li>
                <div class="mh-item">
                    <a href="/{$book_ctrl}/{$vo.param}" title="{$vo.book_name}">
                        <p class="mh-cover" style="background-image: url({$vo.cover_url})"></p>
                    </a>
                    <div class="mh-item-detali">
                        <h2 class="title">
                            <a href="/{$book_ctrl}/{$vo.param}" title="{$vo.book_name}" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                {$vo.book_name}
                            </a>
                    </h2>
                        <p class="zl">
                            <span>评分:</span>
                            <span class="mh-star-line star-5"></span>
                        </p>
                        <p class="chapter" style="width: 181px;">
                            {$vo.summary}
                        </p>
                    </div>
                </div>
            </li>
            {/volist}
        </ul>

    </div>
    <footer>
        <div class="page-pagination mt20">
            <ul>
                <div class="pagination">
                    {if $page.last_page > 1}
                        {if $page.current_page == 1}
                        <li><a>&lt;</a></li>
                        {else/}
                        <li><a id="prevPage" href="/{$booklist_act}?page={$page.current_page-1}{$param}" title="上一页">&lt;</a></li>
                        {/if}

                        {for start="1" end="$page.last_page + 1"}
                            {if ($i != 1 && $i != $page.last_page)
                                and ($i < $page.current_page - 2 || $i > $page.current_page + 2)}
                                <li>
                                    .
                                </li>
                            {else/}
                                {if $i == $page.current_page }
                                <li><a href="/{$booklist_act}?page={$i}{$param}" class="active">{$i}</a></li>
                                {else/}
                                <li><a href="/{$booklist_act}?page={$i}{$param}" title="第{$i}页">{$i}</a></li>
                                {/if}
                            {/if}
                        {/for}
                         {if $page.current_page == $page.last_page}
                        <li><a>&gt;</a></li>
                        {else/}
                        <li><a id="nextPage" href="/{$booklist_act}?page={$page.current_page+1}{$param}" title="下一页">&gt;</a></li>
                        {/if}
                    {/if}
                </div>
            </ul>
        </div>
    </footer>
</section>
<ul class="index-right-float bottom">
    <li><a href="javascript:slide();" class="index-right-float-top"></a></li>
</ul>
{/block}